<template>
  <div>
    <Card :list="list" />
    <Echart @son="fn" />
  </div>
</template>

<script>
import Card from "./card.vue";
import Echart from "./echart.vue";
import { getHomeDate } from "../../api/echarts.js";
export default {
  components: {
    Card,
    Echart,
  },
  data() {
    return {
      list: [
        {
          name: "totalOrder",
          id: 1,
          color: "#1296db",
          num: "111",
          text: "总订单",
          icon: "icon-task",
        },
        {
          name: "totalAmount",
          id: 2,
          color: "#d4237a",
          num: "102,400",
          text: "总销售额",
          icon: "icon-Dollar",
        },
        {
          name: "todayOrder",
          id: 3,
          color: "#1296db",
          num: "102,400",
          text: "今日订单数",
          icon: "icon-renwu",
        },
        {
          name: "totayAmount",
          id: 4,
          color: "#1afa29",
          num: "102,400",
          text: "今日销售额",
          icon: "icon-renminbi",
        },
      ],
      sondata: {},
      xData: "",
    };
  },
  created() {
    this.gethomedate();
  },

  methods: {
    fn(o) {
      this.sondata = o;
    },
    async gethomedate() {
      const data = await getHomeDate();
      this.list.forEach((item) => {
        item.num = data[item.name];
      });
      // 给表格赋值
      this.sondata.option.xAxis[0].data = data.xData;
      this.sondata.option.series[0].data = data.amountData;
      this.sondata.option.series[1].data = data.orderData;
      this.sondata.myChart.setOption(this.sondata.option);
    },
  },
};
</script>

<style lang="less" scoped>
</style>